<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="top">
        <div class="container">
            <div class="top-lading">
                <a href="#">登录</a><span>|</span><a href="#">注册</a>
            </div>
            <div class="top-nav">
                <a href="#">小米网</a><span>|</span>
                <a href="#">MIUI</a><span>|</span>
                <a href="#">米聊</a><span>|</span>
                <a href="#">游戏</a><span>|</span>
                <a href="#">多看阅读</a><span>|</span>
                <a href="#">云服务</a><span>|</span>
                <a href="#">小米网移动版</a><span>|</span>
                <a href="#">Select region</a><span>|</span>
                <a href="#">米粉节答疑</a>
            </div>
        </div>
    </div>
    <hr />
    <div class="container row">
        
        <div class="header-logo">            
            <div class="header-search">
                <p><img src="images/clock.png" alt=""> 4.14日开放购买</p>
                <input type="text" placeholder="搜索您需要的产品">
                <button class="tc-333 "><img src="images/shopcar.png" alt="" >购物车</button>
                <div class="search tc-333">
                    <a href="#" >小米手环</a>&nbsp;
                    <a href="#">耳机音响</a>&nbsp;
                    <a href="#">保护盒</a>
                    <button class="l-border"></button>
                </div>
                
            </div>
            <img src="images/logo.png" alt="">
        </div>
        <div class="show row border">                                
            <div class="subtotal">
                <p class="bgc-xiaomi tc-white">全部商品分类</p>
                <ul class="row">
                    <p class="tc-xiaomi">购买手机</p>
                    <li><a href="#">小米Noto</a></li>
                    <li><a href="#">小米4</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">红米Noto</a></li>                        
                </ul>
                <hr>
                <ul class="row">
                    <p class="tc-xiaomi">购买电视与平板</p>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">小米盒子</a></li>
                    <li><a href="#">小米平板</a></li>
                </ul>
                <hr>
                <ul class="row">
                    <p class="tc-xiaomi">路由器与智能硬件</p>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">体重秤</a></li>
                    <li><a href="#">净化器与滤芯</a></li>
                </ul>
                <hr>
                <ul class="row">                        
                    <p class="tc-xiaomi">插线板、移动电源与电池</p>
                    <li><a href="#">小米移动电源</a></li>
                    <li><a href="#">电池</a></li>
                    <li><a href="#">充电器</a></li>                    
                </ul>
                <hr>
                <ul class="row">                        
                    <p class="tc-xiaomi">耳机音响与存储卡</p>
                    <li><a href="#">小米头戴式耳机</a></li>
                    <li><a href="#">小米活塞耳机</a>  </li>                  
                </ul>
                <hr>
                <ul class="row">                        
                    <p class="tc-xiaomi">保护套与贴膜</p>
                    <li><a href="#">保护套/保护壳</a></li>
                    <li><a href="#">贴膜</a></li>                    
                    <li><a href="#">防尘塞</a></li>                    
                </ul>
                <hr>
                <ul class="row">                        
                    <p class="tc-xiaomi">后盖与个性化配件</p>
                    <li><a href="#">米键</a></li>
                    <li><a href="#">后盖</a></li>                    
                    <li><a href="#">贴纸</a></li>                    
                    <li><a href="#">手机支架</a></li>                    
                </ul>                    
                <hr>
                <ul class="row">
                    <p class="tc-xiaomi">小米生活方式</p>
                    <li><a href="#">服装</a></li>
                    <li><a href="#">米兔</a></li>                    
                    <li><a href="#">背包</a></li>                    
                    <li><a href="#">生活周边</a></li>                    
                </ul>
            </div>      
            <div class="header-nav">
                <ul >               
                    <li class="tc-white bgc-nav"><a href="#">首页</a></li>
                    <li class="tc-white bgc-nav"><a href="#">小米手机</a></li>
                    <li class="tc-white bgc-nav"><a href="#">红米手机</a></li>
                    <li class="tc-white bgc-nav"><a href="#">小米平板</a></li>
                    <li class="tc-white bgc-nav"><a href="#">小米盒子</a></li>
                    <li class="tc-white bgc-nav"><a href="#">路由器</a></li>
                    <li class="tc-white bgc-nav"><a href="#">合约机</a></li>
                    <li class="tc-white bgc-nav"><a href="#">服务</a></li>
                    <li class="tc-white bgc-nav"><a href="#">社区</a></li>
                </ul>
            
                <div class="showtu row">
                    <div class="show-one"> 
                        <div class="showtu-one"> 
                            <img src="images/banner1.png" alt="" id="banner1" style="vertical-align: bottom">
                            <img src="images/banner2.png" alt="" id="banner2" style="vertical-align: bottom">
                            <img src="images/banner3.png" alt="" id="banner3"  style="vertical-align: bottom">
                            <img src="images/banner4.png" alt="" id="banner4" style="vertical-align: bottom">
                            <img src="images/banner5.png" alt="" id="banner5" style="vertical-align: bottom"> 
                            
                        </div>
                        <ul>
                            <li class="current">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                    </div>
                    <div class="show-two r-border">
                        <img src="images/01.png" alt="" class="photo Clearimg">
                    </div>
                    <div class="show-two r-border">
                        <img src="images/02.png" alt="" class="photo Clearimg">
                    </div>
                    <div class="show-two row">
                        <img src="images/03.png" alt="" class="photo Clearimg">
                    </div>                    
                </div>
            </div>
        </div>
        <div class="biao">
            <a class="border" class="#" ><img src="images/05.png"></a>
            <a href="#"class="border"><img src="images/06.png"></a>
        </div>
        <p class="biaoti">小米明星单品  <a href="#">根据机型选配件</a></p>
        <div class="item row border">
            <div class="col-3 ta-c r-border">
                <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="" >
                <p class="biaoti">小米智能插座</p>
                <p>让普通家电变得智能</p>
            </div>
            <div class="col-3 ta-c r-border">
                <img src="images/T1pZbvBTET1RXrhCrK!220x220.jpg" alt="">
                <p class="biaoti">小米空气净化器</p>
                <p>高性能智能空气净化器立即预约</p>
            </div>
            <div class="col-3 ta-c r-border">
                <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="">
                <p class="biaoti">小米活塞耳机简装版</p>
                <p>好声音源自活塞式音腔、延续经典设计</p>
            </div>
            <div class="col-3 ta-c">
                <img src="images/aa.jpg" alt="">
                <p class="biaoti">小米路由器</p>
                <p>顶级双屏AC智能路由器、内置1TB大硬盘</p>
            </div>
        </div>
        <a href="#" class="biao">更多></a><p class="biaoti">新品上架</p>
        <div class="col-9 row border">
            <div class="col-8 new-one b-border r-border Clearimg" >
                <img src="images/fanghezi0407xiao.jpg" alt="" class="photo Clearimg"> 
            </div>
            <div class="col-4 new-two b-border ">
                <p>小米手环</p>
                <p>79元</p>
                <img src="images/shouhuan.jpg" alt=""> 
            </div>
            <div class="col-4 r-border">
                <div class="new-three b-border ">
                    <div class="col-6">
                        <p>五周年米兔钥匙扣</p>
                        <p>9.9元</p>
                    </div>
                    <div class="col-6">
                        <img src="images/wawa.jpg" alt="" class="photo"> 
                    </div>
                </div>
                <div class="new-three b-border">
                    <div class="col-6 ">
                        <p>CQY派Q8蓝牙耳机</p>
                        <p>59.9元</p>
                    </div>
                    <div class="col-6">
                        <img src="images/lanyaerji.jpg" alt="" class="photo"> 
                    </div> 
                </div>
            </div>
            <div class="col-4 new-two r-border b-border txue">
                <p>小米t恤路标MILOGO</p>
                <p>39元</p>
                
            </div>
            <div class="col-4 new-two b-border ">
                <p>小米4实木后盖</p>
                <p>69元</p>
                <img src="images/muzhishoujihe.jpg" alt="">
            </div>
            <div class="col-4 new-two r-border">
                <p>小米Note超薄保护壳</p>
                <p>49元</p>
                <img src="images/baohuke.png" alt="" >
            </div>
            <div class="col-4 new-two r-border ">
                <p>小米自拍杆</p>
                <p>49元</p>
                <img src="images/zipaigan.jpg" alt="" class="Centerimg">
            </div>
            <div class="col-4 new-two">
                <p>先锋CL3L系列耳式耳机</p>
                <p>99元</p>
                <img src="images/hongerji.jpg" alt="">
            </div>

        </div>
        <div class="col-3  a t-border r-border b-border">
            <div class="tejia cunchuka b-border">
                <div class="tejiashangpin ">
                    <a class="tc-white">特价商品</a>
                </div>
                    <h>SanDisk32G存储卡</h>
                    <p class="tc-red">79元<span style="color:#7f7f7f">109元</span></p>
                    <p>还有更多特价商品</p>
            </div>
            <div class="tejia taocan b-border">
                <h>特惠配件套餐</h>
                <p>手机必备配件组合购买</p>
                    <p>实惠更优惠</p>
            </div>
            <div class="tejia kuwan b-border">
                <h>我爱酷玩</h>
                <p>邂逅炫酷的电子产品</p>
                <p>   结交趣味相投的朋友
                </p>
            </div>
            <div class="more">
                <div class="pass b-border ahover">
                    <p><a>></a>企业用户采购通道</p>
                </div>
                <div class="pass b-border ahover">
                    <a>></a><a>小米手机防伪查询</a>
                </div>
                <div class="pass b-border ahover">
                    <a>></a><a>小米手机官方版</a>
                </div>
                <div class="pass b-border ahover">
                    <a>></a><a>小米路由器官方版</a>
                </div>
                <div class="pass b-border row ahover">
                    <a>></a><a>米粉红包</a>
                </div>
                <div class="yaoqian">
                    <h>话费充值</h>
                    <input type="text" placeholder="请输入手机号码" class="border">
                    <form >
                        <div class="form-group">
                            <select class="border" >
                                <option value="100">100</option>
                                <option value="50">50</option>
                                <option value="20">20</option>
                            </select>
                        </div>
                    </form>
                    <p>实付价格98.4元</p>
                    <button class="border tc-white">立即充值</button>
                </div>

            </div>            
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="service b-border">
                <div class="col-20 repair ta-c">
                    <img src="images/10.png" alt=""><br>
                    <a>一小时快修服务</a>
                </div>
                <div class="col-20 repair ta-c">
                    <img src="images/11.png" alt=""><br>
                    <a>七天无理由退换</a>
                </div>
                <div class="col-20 repair ta-c">
                    <img src="images/12.png" alt=""><br>
                    <a>十五天免费换货</a>
                </div>
                <div class="col-20 repair ta-c">
                    <img src="images/13.png" alt=""><br>
                    <a>满150包邮</a>
                </div>
                <div class="col-20 repair ta-c">
                    <img src="images/14.png" alt=""><br>
                    <a>520余家售后网点</a>
                </div>
            </div>
            <div class="footer-links clearfix row">            
                <dl class="service-list r-border">
                    <dt>帮助中心</dt>                
                    <dd><a href="#">购物指南</a></dd>                
                    <dd><a href="#">支付方式</a></dd>                
                    <dd><a href="#">配送方式</a></dd>                
                </dl>
                <dl class="service-list r-border">
                    <dt>服务支持</dt>                
                    <dd><a href="#">售后政策</a></dd>                
                    <dd><a href="#">自助服务</a></dd>                
                    <dd><a href="#">相关下载</a></dd>                
                </dl>
                <dl class="service-list r-border">
                    <dt>小米之家</dt>                
                    <dd><a href="#">小米之家</a></dd>                
                    <dd><a href="#">服务网店</a></dd>                
                    <dd><a href="#">预约亲临到店服务</a></dd>                
                </dl>
                <dl class="service-list r-border">
                    <dt>关于小米</dt>                
                    <dd><a href="#">了解小米</a></dd>                
                    <dd><a href="#">加入小米</a></dd>                
                    <dd><a href="#">联系我们</a></dd>                
                </dl> 
                <dl class="service-list r-border">
                    <dt>关注我们</dt>                
                    <dd><a href="#">新浪微博</a></dd>                
                    <dd><a href="#">小米部落</a></dd>                
                    <dd><a href="#">官方微信</a></dd>                
                </dl>    
                <div class="contact ta-c">
                    <p class="phone">400-100-5678</p>
                    <p>周一至周日 8:00-18:00<br>（仅收市话费）</p>
                    <button class="tc-white bgc-xiaomi">24小时在线客服</button>
                </div>
            </div>
            <hr>
            <div class="xiaomi-info tc-333 ta-c" >
                <ul class="row center">
                    <li>小米旗下网站：</li>
                    <li><a href="">小米网</a></li><li>|</li>
                    <li><a href="">MIUI</a></li><li>|</li>
                    <li><a href="">米聊</a></li><li>|</li>
                    <li><a href="">多看书城</a></li><li>|</li>
                    <li><a href="">小米路由器</a></li><li>|</li>
                    <li><a href="">繁体香港</a></li><li>|</li>
                    <li><a href="">繁体台湾</a></li><li>|</li>
                    <li><a href="">English</a></li><li>|</li>
                    <li><a href="">小米后院</a></li><li>|</li>
                    <li><a href="">小米大猫店</a></li><li>|</li>
                    <li><a href="">小米淘宝自营店</a></li><li>|</li>
                    <li><a href="">小米网盟</a></li><li>|</li>
                </ul>
                <p>@mi.com&nbsp;京</p>                    
                <form class="form">    
                    <img src="images/16.png" >                    
                    <select class="form-control border">
                        <option value="" >English</option>
                        <option value="">中文</option>
                        <option value="">繁体</option>
                    </select>
                </form>
                
            </div>
        </div>
    </div>
</body>
</html>